<template>
  <el-badge v-if="theme.showNotice" :value="view">
    <vab-icon icon="notification-line" @click="msg" />
  </el-badge>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  import { translateTitle } from '@/utils/i18n'

  export default {
    name: 'VabNotice',
    data() {
      return {
        list: [],
        timer: '',
      }
    },
    computed: {
      ...mapGetters({
        theme: 'settings/theme',
        view: 'user/view',
      }),
    },
    created() {
      this.$nextTick(() => {
        if (this.theme.showNotice) {
          this.fetchData()
          this.timer = setInterval(this.fetchData, 600000)
        }
      })
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    methods: {
      translateTitle,
      ...mapActions({
        getView: 'user/getView',
      }),
      msg() {
        this.$router.push('/msg')
      },
      fetchData() {
        this.getView()
      },
    },
  }
</script>

<style lang="scss" scoped>
  :deep() {
    .el-tabs__active-bar {
      min-width: 28px;
    }
  }

  .notice-list {
    height: 29vh;

    ul {
      padding: 0 15px 0 0;
      margin: 0;

      li {
        display: flex;
        align-items: center;
        padding: 10px 0 10px 0;

        :deep() {
          .el-avatar {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }

        span {
          margin-left: 10px;
        }
      }
    }
  }

  .notice-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 0 0;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    border-top: 1px solid #e8eaec;

    i {
      margin-right: 3px;
    }
  }
</style>
